<template>
  <div id="usersList">
    <div class="all">
      <div class="Uheader">
        <el-steps :active="1" finish-status="success" align-center>
          <el-step title="提交订单" description="2021-3-21 3:40:21"></el-step>
          <el-step title="支付订单" description=""></el-step>
          <el-step title="平台发货" description=""></el-step>
          <el-step title="确认收货" description=""></el-step>
          <el-step title="完成评价" description=""></el-step>
        </el-steps>
      </div>
      <div class="Ucontant">
        <div class="fircd">
          <p><i class="el-icon-warning"></i> 当前订单状态</p>
          <span>
            <el-button size="mini" @click="dialogTableVisible = true"
              >订单跟踪</el-button
            >

            <el-dialog
              title="收货地址"
              :visible.sync="dialogTableVisible"
              width="40%"
            >
              <div style="height: 300px">
                <el-steps
                  direction="vertical"
                  :active="6"
                  finish-status="success"
                >
                  <el-step
                    title="订单已提交,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="订单付款成功"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在北京市进行下级地点扫描,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在分拨中心广东深圳公司进行卸车扫描,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在广东深圳公司进行发出扫描"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="到达目的地网点广东深圳公司,快件将很快进行派送"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="订单已签收,期待再次为您服务"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                </el-steps>
              </div>
            </el-dialog>
          </span>
          <span>
            <el-button size="mini" @click="dialogFormVisible = true"
              >备注备注</el-button
            >

            <el-dialog
              title="收货地址"
              :visible.sync="dialogFormVisible"
              class="form-el-dialog"
              width="40%"
            >
              <el-form>
                <el-form-item label="活动形式">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="fn()">确 定</el-button>
              </div>
            </el-dialog>
          </span>
        </div>
        <div class="secd">
          <i class="el-icon-info" style="font-size: 20px"></i
          >&nbsp;&nbsp;基本信息
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f3f8fe' }"
          >
            <el-table-column prop="orderSn" label="订单编号" align="center">
            </el-table-column>
            <el-table-column
              prop="orderType"
              label="发货单流水号"
              align="center"
              :formatter="format5"
            >
            </el-table-column>
            <el-table-column
              prop="memberUsername"
              label="用户账号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="payType"
              label="支付方式"
              align="center"
              :formatter="format1"
            >
            </el-table-column>
            <el-table-column
              prop="sourceType"
              label="订单来源"
              align="center"
              :formatter="format2"
            >
            </el-table-column>
            <el-table-column
              prop="orderType"
              label="订单类型"
              align="center"
              :formatter="format4"
            >
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f3f8fe' }"
          >
            <el-table-column
              prop="payType"
              label="配送方式"
              align="center"
              :formatter="format7"
            >
            </el-table-column>
            <el-table-column prop="deliverySn" label="物流单号" align="center">
            </el-table-column>
            <el-table-column
              prop="autoConfirmDay"
              label="自动确认收货时间"
              align="center"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.autoConfirmDay }}天</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="integration"
              label="订单可得优币"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="integration"
              label="订单可得成长值"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="orderType"
              label="活动信息"
              align="center"
              :formatter="format6"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="thcd">
          <i class="el-icon-info" style="font-size: 20px"></i
          >&nbsp;&nbsp;收货人信息
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f3f8fe' }"
          >
            <el-table-column prop="receiverName" label="收货人" align="center">
            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              label="手机号码"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="receiverPostCode"
              label="邮政编码"
              align="center"
            >
            </el-table-column>
            <el-table-column label="收货地址" align="center">
              <template slot-scope="scope">
                {{ scope.row.receiverProvince }}
                {{ scope.row.receiverCity }}
                {{ scope.row.receiverRegion }}
                {{ scope.row.receiverDetailAddress }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="foucd">
          <i class="el-icon-info" style="font-size: 20px"></i
          >&nbsp;&nbsp;商品信息
          <el-table
            :data="tableData1"
            :summary-method="getSummaries"
            show-summary
            border
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column
              prop="productPic"
              label="商品图片"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <img
                  :src="scope.row.productPic"
                  alt=""
                  style="width: 80px; height: 80px"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="商品名称"
              align="center"
              width="280"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.productName }}</p>
                <p style="margin-top: 10px">
                  品牌:{{ scope.row.productBrand }}
                </p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="价格/货号" align="center">
              <template slot-scope="scope">
                <p>价格:¥{{ scope.row.productPrice }}</p>
                <p style="margin-top: 10px">货号:{{ scope.row.productSn }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="属性" align="center">
            </el-table-column>
            <el-table-column prop="productQuantity" label="数量" align="center">
            </el-table-column>
            <el-table-column prop="productPrice" label="小计" align="center">
              <template slot-scope="scope">
                <p>价格:¥{{ scope.row.productPrice }}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fifcd">
          <i class="el-icon-info" style="font-size: 20px"></i
          >&nbsp;&nbsp;费用信息
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f3f8fe' }"
          >
            <el-table-column prop="totalAmount" label="商品合计" align="center">
              <template slot-scope="scope">
                <p>¥{{ scope.row.totalAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="运费" align="center">
              <template slot-scope="scope">
                <p>¥{{ scope.row.freightAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="优惠券" align="center">
              <template slot-scope="scope">
                <p>-¥{{ scope.row.couponAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="积分抵扣" align="center">
              <template slot-scope="scope">
                <p>-¥{{ scope.row.integrationAmount }}</p>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: '#f3f8fe' }"
          >
            <el-table-column prop="" label="活动优惠" align="center">
              <template slot-scope="scope">
                <p>-¥{{ scope.row.promotionAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="折扣金额" align="center">
              <template slot-scope="scope">
                <p>-¥{{ scope.row.discountAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="订单总金额" align="center">
              <template slot-scope="scope">
                <p style="color: red">¥{{ scope.row.totalAmount }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="" label="应付款金额" align="center">
              <template slot-scope="scope">
                <p style="color: red">¥{{ scope.row.payAmount }}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="sixcd">
          <i class="el-icon-info" style="font-size: 20px"></i
          >&nbsp;&nbsp;操作信息
          <el-table
            :data="tableData2"
            border
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column prop="operateMan" label="操作者" align="center">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="操作时间"
              align="center"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" align="center" :formatter="format8">
            </el-table-column>
            <el-table-column prop="orderStatus" label="付款状态" align="center" :formatter="format9">
            </el-table-column>
            <el-table-column prop="orderStatus" label="发货状态" align="center" :formatter="format10">
            </el-table-column>
            <el-table-column
              prop="note"
              label="备注"
              align="center"
              width="280"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      orderSn: "",
      memberUsername: "",
      integrationAmount: "",
      promotionAmount: "",
      couponAmount: "",
      discountAmount: "",
      receiverProvince: "",
      form: {
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },

  methods: {
    fn() {
      let that = this;
      var idxx = this.tableData[0].id
      console.log(idxx);
      this.dialogFormVisible = false;
      var app = this.form.desc
      console.log(this.form.desc);
      this.$axios
        .post("http://192.168.1.147:8080/order/update/note?id="+idxx+"&note="+app+"&status=2", {
          
            note: that.form.desc,
          
        })
        .then(function (response) {
          
        });
        
        
    },
    onSubmit() {
      console.log("submit!");
    },

    format(i, cellValue) {
      var status = [
        ["未支付", "支付宝", "微信"],
        ["APP订单"],
        ["待发货", "已发货", "已完成", "已关闭"],
        ["正常订单"],
        ["暂无"],
        ["单品促销,打折优..."],
        ["暂无", "顺丰快递", "京东快递"],
        ["已发货","已关闭","待发货","待付款"],
        ["已退款","已支付","已退货","已收货"],
        ["已退货","待发货"]
      ];
      return status[i][cellValue - 1];
    },
    format1(row, column, cellValue) {
      return this.format(0, cellValue + 1);
    },
    format2(row, column, cellValue) {
      return this.format(1, cellValue);
    },
    format3(row, column, cellValue) {
      return this.format(2, cellValue);
    },
    format4(row, column, cellValue) {
      return this.format(3, cellValue + 1);
    },
    format5(row, column, cellValue) {
      return this.format(4, cellValue + 1);
    },
    format6(row, column, cellValue) {
      return this.format(5, cellValue + 1);
    },
    format7(row, column, cellValue) {
      return this.format(6, cellValue + 1);
    },
    format8(row, column, cellValue) {
      return this.format(7, cellValue);
    },
    format9(row, column, cellValue) {
      return this.format(8, cellValue - 1);
    },
    format10(row, column, cellValue) {
      return this.format(9, cellValue -1);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[5] += " 元";
        } else {
          sums[5] = "";
        }
      });

      return sums;
    },
  },
  mounted() {
    let _thats = this;
    
    

    this.tableData.push(this.$route.params.data);
    console.log(this.tableData);
    var idxx = this.tableData[0].id
    console.log(idxx);
    this.$axios
      .get("http://192.168.1.147:8080/order/"+idxx, {})
      .then(function (response) {
        _thats.tableData1 = response.data.data.orderItemList;
       
      });
    this.$axios
      .get("http://192.168.1.147:8080/order/"+idxx, {})
      .then(function (response) {
        _thats.tableData2 = response.data.data.historyList;
    
      });
  },
};
</script>

<style   scoped>
.all {
  width: 100%;
  height: 690px;
  overflow: scroll;
}
.Uheader {
  width: 85%;
  height: 100px;
  margin: 0 auto;
}
.Ucontant {
  width: 90%;
  border: 1px solid cyan;
  margin: 0 auto;
}
.fircd {
  width: 100%;
  height: 80px;
  background-color: #f3f8fe;
}
.secd {
  width: 95%;
  margin: 20px auto;
}
.thcd {
  width: 95%;
  margin: 20px auto;
}
.foucd {
  width: 95%;
  margin: 20px auto;
}
.fifcd {
  width: 95%;
  margin: 20px auto;
}
.sixcd {
  width: 95%;
  margin: 20px auto;
}
.el-table__header th {
  padding: 0;
  height: 40px;
}
.el-dialog {
  height: 54vh;
  overflow: auto;
}
.form-el-dialog {
  height: 54vh;
  overflow: auto;
}
.fircd p {
  float: left;
  margin-top: 25px;
  margin-left: 30px;
  color: red;
}
.fircd span:nth-child(2) {
  float: right;
  margin-right: 30px;
  margin-top: 25px;
}
.fircd span:nth-child(3) {
  float: right;
  margin-right: 10px;
  margin-top: 25px;
}
</style>